class Shopp {
    constructor() {
        this.Retu()
    }

    //返回首页
    Retu() {
        let nav = document.querySelector('.rett');
        nav.addEventListener("click", function (e) {
            // console.log(e.type);
            if (e.type == "click") {
                // console.log(222);
                location.href = "index.html";
            } else {
                return;
            }

        })

    }


    /*获取页面元素*/
    $(ele) {
        let res = document.querySelectorAll(ele);
        // 如果获取到的是,当个节点集合,就返回单个节点,如果是多个节点集合,就返回整个集合.
        return res.length == 1 ? res[0] : res;
    }
}
new Shopp;

init();
function init() {
    res = sessionStorage.getItem("current");
    // console.log(res);
    res = JSON.parse(res);
    // console.log(res);
    mids = document.querySelector('.mids');
    // console.log(mids);
    redd();
    

}


// 放大镜
const MINI_WIDTH = 450,
    MASK_WIDTH = 303.75,
    MAX_WIDTH = 540;
var minn = document.querySelector('.minn');
//绑定移入移出
minn.addEventListener("mouseleave", mouseHandler);
minn.addEventListener("mouseenter", mouseHandler);
var mask = document.querySelector('.mask');
var max = document.querySelector('.max');
// console.log(max, minn);
var prev = '';
var left, right;
var imgCon = document.querySelector('.imgas');
    // console.log(imgCon);
    imgCon.addEventListener("mouseover", imgMouseHandler);
    var evt = new MouseEvent("mouseover", { bubbles: true });
    imgCon.firstElementChild.dispatchEvent(evt);

function mouseHandler(e) {
    // console.log(e.type);
    if (e.type === "mouseenter") {
        //当鼠标移入是,显示minn和mask
        max.style.display = "block";
        mask.style.display = "block";
        // console.log(111);
        minn.addEventListener("mousemove", mouseHandler)
    } else if (e.type === "mouseleave") {
        // console.log(111);
        // 当鼠标离开minn时，隐藏minn和mask，并且删除侦听鼠标在minn移动事件
        max.style.display = "none";
        mask.style.display = "none";
        minn.removeEventListener("mousemove", mouseHandler);
    } else if (e.type === "mousemove") {
        // 当鼠标移动时，获取minn相对视口的矩形范围，包括坐标
        var rect = minn.getBoundingClientRect();
        maskMove(e.clientX - rect.x, e.clientY - rect.y)
    }
}

function maskMove(x, y) {
    // 将mask的放在鼠标的中间，就是减去mask一半宽度
    x = x - MASK_WIDTH / 2;
    y = y - MASK_WIDTH / 2;
    //现在xy的边界
    if (x < 0) x = 0;
    if (y < 0) y = 0;
    if (x > MINI_WIDTH - MASK_WIDTH) x = MINI_WIDTH - MASK_WIDTH;
    if (y > MINI_WIDTH - MASK_WIDTH) y = MINI_WIDTH - MASK_WIDTH;
    //设置mask的边表为x,y
    Object.assign(mask.style,{
        left:x + "px",
        top: y + "px"
    });
    // 设置max的背景图坐标与x,y相反，乘以相对比例
    Object.assign(max.style, {
        backgroundPositionX: -x * MAX_WIDTH / MASK_WIDTH + "px",
        backgroundPositionY: -y * MAX_WIDTH / MASK_WIDTH + "px"
    })
}




function imgMouseHandler(e) {
    if (e.target.nodeName !== "IMG") return;
    //设置边框线提醒
    changeAb(e.target);
    //获取小图片显示到大盒子中
    minn.style.backgroundImage = max.style.backgroundImage = `url(${e.target.src})`;
    // console.log(e.target.src);
}
//切换边框线

function changeAb(elem) {
    if (prev) {
        prev.style.borderColor = "transparent";
    }
    prev = elem;
    prev.style.borderColor = "red";
}
//跳回首页
let mindb = document.querySelector('.mindb');
// console.log(mindb);
mindb.addEventListener("click", function (e) {
    // console.log(111);
    // console.log(e.type);
    if (e.type == "click") {
        location.href = `index.html`;
    } else {
        return;
    }
})

// 跳转购物车
let shop = document.querySelector('.shop');
shop.addEventListener("click", function (e) {
    // console.log(111);
    if (e.type == "click") {
        location.href = `shaotcar.html?${res.id}`;
    } else {
        return;
    }
})


//渲染
function redd() {
    let src = `
    <div class="mids">
            <div class="mida">
                <span class="mindb">首页</span>
                &nbsp;>&nbsp;
                <span class="mindc">${res.Pro}</span>
                <div class="daet">
                    <div class="minn">
                        <div class="mask"></div>
                    </div>
                    <div class="max"></div>
                    <div class="carousel-one">
                        <div class="lefts"></div>
                        <div class="carousel">
                            <div class="imgas">
                            ${res.imgmin.reduce((prev, it) => {
        return prev + `
                                <img src="${it}">
                                    `
    }, ``)}


                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="deta">
                <p class="nam">${res.Pro}</p>
                <span>${res.Prod}</span>
                <div class="fro">${res.mer}</div>
                <hr>
                <div class="met">
                    <span>售价</span>
                    <span class="may">${res.price}</span>
                    <span>生产周期</span>
                    <span class="day">${res.day}</span>
                </div>
                <div class="shop">加入购物车</div>
            </div>
        </div>
        `
    mids.innerHTML = src;
};